---
title: คู่มือการโยกย้าย
---

# คู่มือการโยกย้าย

## การโยกย้าย RainbowKit

### 2.x.x ความเปลี่ยนแปลงที่แตกหัก

ส่วนประกอบ `wagmi` และ `viem` เวอร์ชันเสถียรได้ถึง 2.x.x และมีการเปลี่ยนแปลงที่ไม่สามารถกลับได้ตามเดิม

ทำตามขั้นตอนด้านล่างเพื่อทำการย้าย

**1. อัปเกรด RainbowKit, `wagmi` และ `viem` เป็นเวอร์ชั่นล่าสุด**

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

**2. ติดตั้ง `@tanstack/react-query` ซึ่งเป็น peer dependency**

กับ Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) กลายเป็น peer dependency ที่จำเป็น

ติดตั้งด้วยคำสั่งตามนี้:

```bash
npm i @tanstack/react-query
```

**3. อัปเกรดการกำหนดค่าของคุณเกี่ยวกับ RainbowKit และ Wagmi**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. ตรวจสอบการเปลี่ยนแปลงที่แตกหักใน `wagmi` และ `viem`**

ถ้าคุณใช้ hook ของ `wagmi` และ action ของ `viem` ใน dApp ของคุณ คุณต้องทำตามคู่มือการย้ายไปยัง v2:

- [คู่มือการย้าย Wagmi v2](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [การเปลี่ยนแปลงที่สำคัญของ Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### การเปลี่ยนแปลงของ RainbowKit

**1. การปรับปรุงพฤติกรรมสำหรับกระเป๋าคอนเนคชั่น EIP-6963**

กระเป๋าที่สนับสนุนมาตรฐานการเชื่อมต่อ EIP-6963 ใหม่ (รวมถึง Rainbow, MetaMask และอื่น ๆ) จะปรากฏอยู่ในส่วน `ติดตั้งแล้ว` อัตโนมัติในระหว่างการเชื่อมต่อกระเป๋าเงิน. สิ่งนี้จะทำให้แน่ใจว่าผู้ใช้สามารถหากระเป๋าที่ชื่นชอบและเชื่อมต่อกับ dApps ได้โดยไม่มีข้อขัดแย้งหรือปุ่มย้อนกลับ.

นักพัฒนายังคงมีการควบคุมเต็มที่บนรายการกระเป๋าที่กำหนดเองเพื่อเน้นกระเป๋าที่สนันสนุนสำหรับผู้ใช้งาน. ขอแนะนำให้คุณยังคงรวม `injectedWallet` และ `walletConnectWallet` ในรายชื่อเพื่อรองรับทุกแพลตฟอร์ม.

**2. การกำหนดค่า Wagmi ด้วย getDefaultConfig**

API ใหม่นี้ทำให้ประสบการณ์การกำหนดค่าง่ายขึ้นและแทนที่จำเป็นต้องใช้ `createConfig` ของ Wagmi โดยตรง. การกำหนดค่าโซ่ง่ายขึ้น, รวมถึงการอนุมาน Public Providers ใน `transports`.

รายชื่อกระเป๋าเงินเริ่มต้นจะถูกเพิ่มโดยอัตโนมัติ ทำให้ไม่จำเป็นต้องใช้ `getDefaultWallets` และ `connectorsForWallets`

คุณสามารถสร้างรายการกระเป๋าของคุณเองโดยการส่งเชื่อมต่อของกระเป๋าที่นำเข้าหรือกำหนดเองไปยัง `wallets`. ไม่จำเป็นต้องมีการสร้างอินสแตนซ์กระเป๋าหรือการส่ง `projectId` และ `chains`.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

คุณไม่จำเป็นต้องส่งผ่าน `chains` ให้กับ `<RainbowKitProvider>` อีกต่อไป

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. โซ่ที่กำหนดเอง**

ประเภท `Chain` ได้รับการเปลี่ยนแปลงให้สอดคล้องกับ Wagmi v2 และยังคงรองรับข้อมูลเมตา `iconUrl` และ `iconBackground` ของ RainbowKit

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

ตัวอย่างกับ `getDefaultConfig`:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});
```

ตัวอย่างกับ `createConfig`:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. กระเป๋าที่กำหนดเอง**

RainbowKit Wallet Connectors ได้เปลี่ยนแปลงเพื่อสนับสนุน Wagmi v2. อ้างอิง [เอกสารที่อัปเดต](https://www.rainbowkit.com/docs/custom-wallets) และ [ตัวเชื่อมต่อได้อย่างไร](https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) เพื่ออัปเกรดตัวเชื่อมกระเป๋าเองของคุณใน dApp.

ตัวเชื่อมกระเป๋าตอนนี้สนับสนุนมาตรฐาน EIP-6963 โดย `rdns` prop. ตรวจสอบให้แน่ใจว่าได้ดำเนินการในรายการกระเป๋าของคุณเพื่อป้องกันการอ้างอิงซ้ำกันในกระเป๋าที่สนับสนุน EIP-6963.

### 1.x.x ความเปลี่ยนแปลงที่แตกหัก

#### อัพเดตเป็น wagmi v1

Wagmi peer dependency ได้อัปเดตเป็น `1.x.x`.

ทำตามขั้นตอนด้านล่างเพื่อทำการย้าย

**1. อัปเกรด RainbowKit และ `wagmi` เป็นเวอร์ชั่นล่าสุด**

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

**2. ติดตั้ง `viem` ซึ่งเป็น peer dependency**

wagmi v1 ต้องการ `viem` peer dependency. ติดตั้งด้วยคำสั่งต่อไปนี้:

```bash
npm i viem
```

**3. ตรวจสอบความเข้ากันได้ของ bundler และ polyfill**

ใช้การกำหนดค่า [ตัวอย่าง Webpack ของ Next.js](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/next.config.js) สำหรับการให้คำแนะนำในการกำหนดค่า

คำแนะนำของเฟรมเวิร์กเพิ่มเติมสำหรับ Vite และ Remix พร้อมใช้งาน [ที่นี่](https://www.rainbowkit.com/docs/installation#additional-build-tooling-setup).

**4. ตรวจสอบความเปลี่ยนแปลงที่แตกหักใน `wagmi`**

ถ้าคุณใช้ `wagmi` ในแอปพลิเคชันของคุณ, คุณจะต้องปฏิบัติตามคู่มือการโยกย้าย `wagmi` เป็น v1.

[คุณสามารถดูคู่มือการย้ายที่นี่](https://wagmi.sh/react/migration-guide).

### 0.12.x ความเปลี่ยนแปลงที่แตกหัก

Wagmi peer dependency ได้อัปเดตเป็น `0.12.x`.

RainbowKit ได้ใช้งานคอนเนคเตอร์ `WalletConnectLegacyConnector` ใน `wagmi` เพื่อการสนับสนุนอย่างต่อเนื่องสำหรับ WalletConnect v1. การสนับสนุนสำหรับ WalletConnect v2 และ `WalletConnectConnector` จะพร้อมให้บริการในรุ่นแพตช์ในอนาคต, โดยไม่มีการเปลี่ยนแปลงที่แตกหัก.

กระเป๋าจะถูกเปลี่ยนแปลงอัตโนมัติในรุ่นในอนาคต.

ทุกๆ dApp ต้องระบุ [โปรเจ็กต์ ID ของ WalletConnect Cloud](https://cloud.walletconnect.com/) เพื่อเปิดใช้งาน WalletConnect v2. ต้องทำให้เสร็จสิ้นก่อนที่เซิร์ฟเวอร์สะพาน WalletConnect v1 จะปิดตัวลงในวันที่ 28 มิถุนายน 2023. RainbowKit จะชอบ v1 สำหรับทุกกระเป๋าอย่างเงียบ ๆ หาก `projectId` ไม่ได้รับการระบุ.

ทำตามขั้นตอนด้านล่างเพื่อทำการย้าย

#### 1. อัปเกรด RainbowKit และ `wagmi` เป็นเวอร์ชั่นล่าสุด

```bash
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
```

#### 2. จัดหาโปรเจ็กต์ ID ของ WalletConnect Cloud

ทุก ๆ dApp ที่พึ่งพา WalletConnect ตอนนี้จำเป็นต้องรับ `projectId` จาก [WalletConnect Cloud](https://cloud.walletconnect.com/). นี่คือแบบฟรีและใช้เวลาไม่กี่นาทีเท่านั้น.

ระบุ `projectId` ให้กับ `getDefaultWallets` และ RainbowKit wallet connectors แบบรายบุคคลเช่นต่อไปนี้:

```ts
const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      readyWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);
```

### 0.11.x ความเปลี่ยนแปลงที่แตกหัก

Wagmi peer dependency ได้อัปเดตเป็น `0.11.x`.

ทำตามขั้นตอนด้านล่างเพื่อทำการย้าย

#### 1. อัปเกรด RainbowKit และ `wagmi` เป็นเวอร์ชั่นล่าสุด

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

#### 2. ตรวจสอบการเปลี่ยนแปลงที่แตกหักใน `wagmi`

ถ้าคุณใช้ `wagmi` hooks ในแอปพลิเคชันของคุณ, คุณจะต้องตรวจสอบว่าแอปพลิเคชันของคุณได้รับผลกระทบจากการเปลี่ยนแปลงที่แตกหักใน `wagmi`.

[คุณสามารถดูคู่มือการย้ายที่นี่](https://wagmi.sh/react/migration-guide#011x-breaking-changes).

### 0.10.x ความเปลี่ยนแปลงที่แตกหัก

Wagmi peer dependency ได้อัปเดตเป็น `0.10.x`.

ทำตามขั้นตอนด้านล่างเพื่อทำการย้าย

#### 1. อัปเกรด RainbowKit และ `wagmi` เป็นเวอร์ชั่นล่าสุด

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

#### 2. ตรวจสอบการเปลี่ยนแปลงที่แตกหักใน `wagmi`

ถ้าคุณใช้ `wagmi` hooks ในแอปพลิเคชันของคุณ, คุณจะต้องตรวจสอบว่าแอปพลิเคชันของคุณได้รับผลกระทบจากการเปลี่ยนแปลงที่แตกหักใน `wagmi`.

[คุณสามารถดูคู่มือการย้ายที่นี่](https://wagmi.sh/react/migration-guide#010x-breaking-changes).

### 0.9.x ความเปลี่ยนแปลงที่แตกหัก

Wagmi peer dependency ได้อัปเดตเป็น `0.9.x`.

ทำตามขั้นตอนด้านล่างเพื่อทำการย้าย

#### 1. อัปเกรด RainbowKit และ `wagmi` เป็นเวอร์ชั่นล่าสุด

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

#### 2. ตรวจสอบการเปลี่ยนแปลงที่แตกหักใน `wagmi`

ถ้าคุณใช้ `wagmi` hooks ในแอปพลิเคชันของคุณ, คุณจะต้องตรวจสอบว่าแอปพลิเคชันของคุณได้รับผลกระทบจากการเปลี่ยนแปลงที่แตกหักใน `wagmi`.

[คุณสามารถดูคู่มือการย้ายที่นี่](https://wagmi.sh/react/migration-guide#09x-breaking-changes).

### 0.8.x ความเปลี่ยนแปลงที่แตกหัก

Wagmi peer dependency ได้อัปเดตเป็น `0.8.x`.

ทำตามขั้นตอนด้านล่างเพื่อทำการย้าย

#### 1. อัปเกรด RainbowKit และ `wagmi` เป็นเวอร์ชั่นล่าสุด

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

#### 2. ตรวจสอบการเปลี่ยนแปลงที่แตกหักใน `wagmi`

ถ้าคุณใช้ `wagmi` hooks ในแอปพลิเคชันของคุณ, คุณจะต้องตรวจสอบว่าแอปพลิเคชันของคุณได้รับผลกระทบจากการเปลี่ยนแปลงที่แตกหักใน `wagmi`.

[คุณสามารถดูคู่มือการย้ายที่นี่](https://wagmi.sh/react/migration-guide#08x-breaking-changes).

### 0.7.x ความเปลี่ยนแปลงที่แตกหัก

ถ้าคุณสร้างรายการกระเป๋าของคุณเอง, คุณจะต้องนำเข้าแต่ละกระเป๋าแบบเดี่ยวเพื่อให้ขนาดบันเดิลลดลง. หมายเหตุว่ากระเป๋าไม่ถูกจัดในกลุ่มแบบ `wallet` อีกต่อไป, โดยกระเป๋าทุกใบมีทางลงท้ายเป็น `Wallet`.

```diff
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];
```

โปรดทราบว่าเลเยอร์ความเข้ากันได้ย้อนหลังของ Steakwallet ถูกลบออกแล้ว. Omni ควรใช้แทน.

```diff
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];
```

### 0.4.x ความเปลี่ยนแปลงที่แตกหัก

RainbowKit ได้อัปเกรด Wagmi peer dependency เป็น `0.5.x`.

ทำตามขั้นตอนด้านล่างเพื่อทำการย้าย

#### 1. อัปเกรด dependencies

อัปเกรด RainbowKit และ wagmi เป็นเวอร์ชั่นล่าสุด

```bash
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
```

#### 2. ตรวจสอบการเปลี่ยนแปลงที่แตกหักใน `wagmi`

ถ้าคุณใช้ `wagmi` hooks ในแอปพลิเคชันของคุณ, คุณจะต้องตรวจสอบว่าแอปพลิเคชันของคุณได้รับผลกระทบจากการเปลี่ยนแปลงที่แตกหักใน `wagmi`.

[คุณสามารถดูคู่มือการย้ายที่นี่](https://wagmi.sh/react/migration-guide#05x-breaking-changes).

### 0.3.x ความเปลี่ยนแปลงที่แตกหัก

ได้ลบพารามิเตอร์ `chainId` ออกจาก `createConnector` บนประเภท `Wallet`.

**โปรดทราบว่ากระเป๋าที่มีในตัวทั้งหมดใช้ API ใหม่. ผู้บริโภคส่วนใหญ่ไม่น่าจะได้รับผลกระทบ. การเปลี่ยนแปลงนี้ส่งผลกระทบเฉพาะผู้บริโภคที่ได้สร้าง/บริโภค [custom wallets](/docs/custom-wallets).**

ถ้าคุณเคยอนุพันธ์ URL RPC จาก `chainId` บน `สร้างคอนเนคเตอร์`, คุณสามารถถอนรหัสนั้นออกได้แล้วขณะนี้ wagmi จัดการ URL RPC ภายในเมื่อนำมาใช้กับ `configureChains`.

```diff
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);
```

### 0.2.x ความเปลี่ยนแปลงที่แตกหัก

RainbowKit อัปเกรด Wagmi peer dependency เป็น `^0.4`.

ทำตามขั้นตอนด้านล่างเพื่อทำการย้าย

#### 1. อัปเกรด dependencies

อัปเกรด RainbowKit และ wagmi เป็นเวอร์ชั่นล่าสุด

```bash
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
```

#### 2. แทนที่การนำเข้า configureChains

นำเข้า `configureChains` จาก wagmi แทน RainbowKit:

```diff
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
```

#### 3. ย้าย providers

RainbowKit ไม่ได้สกัด `apiProvider` API อีกต่อไป. แทนที่ด้วย provider ที่คุณต้องการจาก wagmi.

```diff
- import { apiProvider } from '@rainbow-me/rainbowkit';
```

#### Alchemy

นำเข้า `alchemyProvider` จาก `wagmi/providers/alchemy`.

```diff
+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
```

#### Infura

นำเข้า `infuraProvider` จาก `wagmi/providers/infura`.

```diff
+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
```

#### JSON RPC

นำเข้า `jsonRpcProvider` จาก `wagmi/providers/jsonRpc`.

```diff
+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);
```

#### Public provider

นำเข้า `publicProvider` จาก `wagmi/providers/public`.

```diff
+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
```

#### 4. เปลี่ยนชื่อ provider ของ wagmi

เปลี่ยนชื่อ `WagmiProvider` เป็น `WagmiConfig`.

```diff
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

และเสร็จแล้ว! 🌈
